<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="auture" content="腾">
  <title>h5学习网址总集</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <style>
    ul {
      float: left;
      /*text-align: center;*/
    }

    .box {
      height: 450px;
      overflow: auto;
    }

    .fixHeader {
      /*position: fixed;*/
      /*top: 50px;*/
    }
  </style>
</head>

<body>
  <div id="app">
    <ul class="box" v-for="(value,key) in goal">
      <h2 class="fixHeader">{{key}}</h2>
      <li v-for="(value0,key0) in value">
        <a target="_blank" :href="value0">{{key0}}</a>
      </li>
    </ul>
  </div>
</body>

</html>
<script>
  // h5基础
  const goal = {
    h5: {
      菜鸟教程: "http://www.runoob.com/",
      MDN: "https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/",
      animateCss: "https://daneden.github.io/animate.css/"
    },
    UI: {
      bootstrap: "http://v3.bootcss.com/",
      elementUI:"http://element-cn.eleme.io/#/zh-CN",
    },
    JQuery: {
      jQueryAPI: 'http://www.css88.com/jqapi-1.9/',
      cdn:"http://www.bootcdn.cn/",
      百度静态资源:"http://cdn.code.baidu.com/"
    },
    JQ插件: {
      jquery插件库: 'http://www.jq22.com/',
      jquery之家库: 'http://www.htmleaf.com/',
      SuperSlide: 'http://www.superslide2.com/demo.html#effect2',
      图片轮播: 'http://www.tuicool.com/articles/ey6fQ3f',
      swiper中文网: 'http://www.swiper.com.cn/',
      lodash: 'http://lodashjs.com/',
      弹出层fancyBox: 'http://fancybox.net/',
      tween平滑动画: 'http://www.htmleaf.com/jQuery/Layout-Interface/201501271284.html',
      KingMax焦点图: 'http://d.lanrentuku.com/down/js/jiaodiantu-989/',
      flexible手机端适配插件: "https://blog.csdn.net/z1712636234/article/details/77881685",
      富文本编辑器: "https://www.kancloud.cn/wangfupeng/wangeditor3/332599"
    },
    框架: {
      模板引擎: "http://www.jq22.com/jquery-info1097",
      vue: "https://cn.vuejs.org/v2/api/#search-query-nav",
      nuxt:"https://nuxtjs.org/guide/installation",//vue简化版
      vueRouter: "https://router.vuejs.org/zh-cn/essentials/getting-started.html",
      vux: 'https://vux.li/#/',
      vuex: 'https://vuex.vuejs.org/zh-cn/',
      bootstrapVue: 'https://bootstrap-vue.js.org/',
      angular4: "https://www.angular.cn/",
      angular4生命周期: "http://blog.csdn.net/feifei159/article/details/54289030",
      typescript中文: "https://www.tslang.cn/index.html",
      ionic官网: 'http://ionicframework.com/',
      ionic中文网: 'https://yanxiaodi.gitbooks.io/ionic2-guide/content/components/range.html',
      ionic的环境搭建教程: 'http://www.w2bc.com/article/246546',
      react_en: 'https://facebook.github.io/react/docs/hello-world.html',
      react_ch: 'http://www.react-cn.com/index.html',
      reactRouter: "'http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu",
      react_ant: "https://ant.design/index-cn",
      react_redux: "http://www.redux.org.cn/docs/react-redux/api.html",
      webpack: "http://blog.csdn.net/zhaohaixin0418/article/details/55505873",
      AMD规范: "https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)",
      CommonJS规范: 'http://javascript.ruanyifeng.com/nodejs/module.html',
    },
    预处理:{
      Less:"http://lesscss.cn/",
      Sass:"https://www.sass.hk/"
    },
    NoodJs: {
      noodJs: "https://nodejs.org/en/",
      express: 'http://www.expressjs.com.cn/',
    },
    NPM: {
      npm: 'https://www.npmjs.com/',
      Yarn: "https://yarn.bootcss.com/docs/usage.html"
    },

    工具: {
      图文转换: "http://www.sojson.com/image2base64.html",
      百度分享: 'http://share.baidu.com/',
      百度echart: 'http://echarts.baidu.com/',
      百度地图抓取经纬度: 'http://api.map.baidu.com/lbsapi/getpoint/index.html',
      视频播放: 'http://chimee.org/',
      像素风img制作: 'http://gallery.echartsjs.com/editor.html?c=xS1l7vPPwW',
      绘制loading图标: 'https://loading.io/',
      浏览器字体图标: 'http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141225979.html',
      获取图片样式: 'http://www.fancynode.com.cn/pxcook',
      阿里字体图标: 'http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1',
      图标宝图标免费: 'http://ico.58pic.com/zhuantituijian/',
      正则: 'http://tool.oschina.net/uploads/apidocs/jquery/regexp.html',
    },
    论坛博客: {
      码云: 'https://git.oschina.net/',
      项目中国: 'http://www.oschina.net/',
      掘金:"https://juejin.im/",
      博客园:"https://www.cnblogs.com/"
    },
    百度地图拓展: {
      获取区域轮廓: 'http://st219.gitee.io/web_h5qianduanxuexiwangzhanjicheng/methods/baidulk.html'
    },
    移动端: {
      手势: 'https://www.npmjs.com/package/vue-directive-touch',
      阿里移动weex: "http://weex.apache.org/cn/guide/",
    },

    微信: {
      路由跳转: "https://www.cnblogs.com/yaoyuqian/p/7967472.html",
      微信图表: "http://lib.csdn.net/article/wechat/67961",
    },
    python:{
      python基础:"https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001431658427513eef3d9dd9f7c48599116735806328e81000"
    },
    "3D":{
      WebGl:"http://www.hewebgl.com/article/getarticle/27",
      "A-Frame":"http://www.techbrood.com/aframe"
    },
    下载:{
      问卷调查模板: "https://files.cnblogs.com/files/ZT0219/questionare.rar",
    },
    API:{
      百度AI:"http://ai.baidu.com/",
    }
  }
  // 使用vue
  let app = new Vue({
    el: '#app',
    data: {
      goal: goal,
    },
    created() {
      location.href="https://st219.gitee.io/forallmonkeys"
    },
  })

</script>